<template>
  <el-card
    class="device-status work-bench-team__card"
    shadow="never"
    body-style="display: flex; flex-direction: column; height: calc(100% - 20px); padding: 10px 15px;"
  >
    <div class="device-status__header work-bench-team__card__header">
      <span class="work-bench-team__card__title device-status__title">主要设备运行状态</span>
    </div>
    <div class="work-bench-team__card__body device-status__body">
      <div class="device-status__item-wrapper" v-show="index <= 2" v-for="(item, index) in list" :key="index">
        <div class="device-status__item">
          <div class="device-status__item__title">
            <el-badge is-dot type="primary" />
            <span>{{ item.head[0].label }}</span>
          </div>
          <div class="device-status__item__body">
            <div class="device-status__item__body--left">
              <img class="device-status__item__img" :src="img_boiler" />
            </div>
            <div class="device-status__item__body--right">
              <div class="device-status__item__cell" v-for="item2 in item.info" :key="item2.name">
                <label class="device-status__item__target">{{ item2.label }}</label>
                <span class="device-status__item__num">{{ item2.value }}</span>
                <span class="device-status__item__unit">{{ item2.unit }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
// ============================== 导入依赖 ============================== //

import dashboardTeamApi from '@admin/views/Workbench/WorkbenchTeam/api'
import img_boiler from '../img/boiler.png'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'DeviceStatus',

  props: {
    /**
     * 班组ID
     */
    teamId: { type: String, default: '' },
  },

  data() {
    return {
      img_boiler,
      list: [],
    }
  },

  mounted() {
    this.$nextTick(() => {
      dashboardTeamApi.queryTeamDevicePie({
        teamId: this.teamId,
        tenantNo: 0,
      }).then((res) => {
        this.list = (res.info || []).map((b) => {
          return { ...b, name: b.head[0].name }
        })
      })
    })
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
